<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>领导列表</title>
    <script src="../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../res/layui/layui.js"></script>
    <script src="../../res/js/Tools.js"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <script src="../../res/js/base.js"></script>
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script>
    var table2 = null;
    layui.use('table', function() {
        var table = layui.table;

        //第一个实例
        table2 = table.render({
            elem : '#demo',
            height : 550,
            toolbar : '#toolbarDemo',
            url : 'http://127.0.0.1:8900/emp/leaders' //数据接口
            ,
            page : true //开启分页
            ,
            cols : [ [ //表头
                {
                    type : 'checkbox',
                    fixed : 'left'
                }, {
                    field : 'leaderName',
                    title : '领导姓名',
                    width : 150
                },{
                    field : 'leaderBusiness',
                    title : '负责事务',
                    width : 200
                }, {
                    field : 'leaderExp',
                    title : '职责说明',
                    width : 200
                },{
                    field : 'phone',
                    title : '联系方式',
                    width : 200
                }, {
                    field : 'action',
                    title : '操作',
                    width : 200,
                    toolbar : "#barDemo"
                } ] ]
        });

        //监听工具条
        table.on('tool(test)', function(obj) {

            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    //删除数据在这里可以使用Ajax异步  就和平常使用一样简单
                    var url = "http://127.0.0.1:8900/emp/leader/"+data.leaderId;
                    $.ajax({
                        url: url,//地址
                        dataType: 'json',//数据类型
                        type: 'DELETE',//类型
                        timeout: 2000,//超时
                        //请求成功
                        success: function (ret, status) {
                            if (ret.num == 1) {
                                layer.msg(ret.msg, {
                                    icon : 1,
                                    time : 1500
                                }, function() {
                                    table2.reload();
                                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                });
                            } else {
                                layer.msg(ret.msg, {
                                    icon : 2,
                                    time : 1500
                                });
                            }
                        },
                        //失败/超时
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            if (textStatus === 'timeout') {
                                layer.msg("请求超时");
                                setTimeout(function () {
                                    layer.msg('重新请求');
                                }, 2000);
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type : 2,
                    title : '中心领导编辑',
                    shadeClose : true,
                    shade : 0.8,
                    area : [ '700px', '90%' ],
                    content : 'atsEmpLeader.html?id=' + data.leaderId, //iframe的url
                    end : function() {
                    }
                });
            } else if (obj.event === 'select') {
                layer.open({
                    type : 2,
                    title : '中心领导查看',
                    shadeClose : true,
                    shade : 0.8,
                    area : [ '700px', '90%' ],
                    content : 'atsEmpLeader.html?select=1&id=' + data.leaderId, //iframe的url
                    end : function() {
                    }
                });
            }
        });

        $("#close").click(function() {
            $("#divImg").hide(2000);
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'deleteAllBut':
                    layer.confirm('您真的要删除吗', function(index) {
                        var data = checkStatus.data;
                        var ids = "";
                        $.each(data, function(index, item) {
                            ids += item.leaderId + ",";
                        });

                        var url = "http://127.0.0.1:8900/emp/leaders/"+ids;
                        $.ajax({
                            url: url,//地址
                            dataType: 'json',//数据类型
                            type: 'DELETE',//类型
                            timeout: 2000,//超时
                            //请求成功
                            success: function (obj, status) {
                                layer.msg(obj.msg);
                                if(obj.num==1) {
                                    table2.reload();//刷新表格
                                }
                            },
                            //失败/超时
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                if (textStatus === 'timeout') {
                                    layer.msg("请求超时");
                                    setTimeout(function () {
                                        layer.msg('重新请求');
                                    }, 2000);
                                }
                            }
                        });
                    });
                    break;
                case 'addBut':
                    layer.open({
                        type : 2,
                        title : '中心领导编辑',
                        shadeClose : true,
                        shade : 0.8,
                        area : [ '700px', '90%' ],
                        content : 'atsEmpLeader.html', //iframe的url
                        end : function() {
                        }
                    });
                    break;

                case 'seachTable':
                    var name = $("#leaderName").val();
                    var bu = $("#leaderBusiness").val();
                    var phone = $("#phone").val();
                    table2.reload({
                        url: 'http://127.0.0.1:8900/emp/leaders',
                        where: {
                            leaderName: name,
                            leaderBusiness: bu,
                            phone: phone
                        },
                        page: { curr: 1 }
                    });

                    $("#leaderName").val(name);
                    $("#leaderBusiness").val(bu);
                    $("#phone").val(phone);
                    break;
            }
        });
    });

    /**
     * 用在新增或者修改界面   由子窗口调用
     */
    function newLoad() {

        var name = $("#leaderName").val();
        var bu = $("#leaderBusiness").val();
        var phone = $("#phone").val();

        layui.table.reload("demo");

        $("#leaderName").val(name);
        $("#leaderBusiness").val(bu);
        $("#phone").val(phone);
    }
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="select">查看</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div>
        <div class="layui-inline">
            <input class="layui-input" name="leaderName" id="leaderName"
                   autocomplete="off" placeholder="领导姓名">
        </div>

        <div class="layui-inline">
            <input class="layui-input" name="leaderBusiness" id="leaderBusiness"
                   autocomplete="off" placeholder="负责事务">
        </div>

        <div class="layui-inline">
            <input class="layui-input" name="phone" id="phone"
                   autocomplete="off" placeholder="联系电话">
        </div>

        <button class="layui-btn layui-btn-sm"  lay-event="seachTable">查询</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAllBut">删除选中数据</button>
        <button class="layui-btn layui-btn-sm"  lay-event="addBut">增加数据</button>
    </div>
</script>
</body>
</html>